<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
						html {
			
							background-color: #1d1f20;
			
							color: #ffffff;
			
						}
		/* 	
			绘制小人：
			
			定义装小人的容器： */
			
			.container {
			
							height: 300px;
			
							width: 300px;
			
							margin: 50px;
			
						}
			
						.person {
			
							position: absolute;
			
							height: 75px;
			
							width: 0;
			
							color: #fff;
			
							left: 150px;
			
							top: 159px;
			
							transform-origin: 50% 50% 0px;
			
							animation: sprint 2s infinite ease-in;
			
						}
			
			/* 绘制小人头部： */
			
						.person .head:before {
			
							content: "";
			
							position: absolute;
			
							top: 0px;
			
							left: -6px;
			
							height: 2.7px;
			
							width: 42px;
			
							border-radius: 20%;
			
							border: 4px solid white;
			
							background-color: #fff;
			
							transform-origin: 50% 100% 0px;
			
							z-index: 90;
							animation: bob 5s;
			
						}
			
						.person .head {
			
							position: absolute;
			
							top: -30px;
			
							left: -6px;
			
							height: 30px;
			
							width: 30px;
			
							border-radius: 50%;
			
							border: 4px solid white;
			
							transform-origin: 50% 100% 0px;
			
							z-index: 90;
			
						}
			
						.person .head:after {
			
							content: "";
			
							position: absolute;
			
							top: -12px;
			
							left: 9px;
			
							height: 12px;
			
							width: 15px;
			
							border-radius: 30%;
			
							border: 4px solid white;
			
							background-color: #fff;
			
							z-index: 90;
			
						}
			
		/* 	绘制小人的身体： */
			
						.person .torso {
			
							position: absolute;
			
							height: 60px;
			
							width: 0;
			
							border-left: 2px solid white;
			
							left: 0px;
			
							top: 15px;
			
							z-index: 90;
			
						}
			
			/* 绘制小人的双手和双腿： */
			
						.person .part {
			
							position: absolute;
			
							left: 0;
			
							top: 75px;
			
							z-index: 90;
			
						}
			
						.person .part.arm {
			
							position: absolute;
			
							border-left: 3px solid white;
			
							border-bottom: 3px solid white;
			
							height: 45px;
			
							width: 39px;
			
							top: 15px;
			
							right: 300px;
			
							transform-origin: 0% 0% 0px;
			
							animation: pump 1s infinite ease-in-out;
			
						}
			
						.person .part.arm.two {				
			
							animation-delay: .5s;
			
						}
			
						.person .part.leg {
			
							height: 57px;
			
							width: 60px;
			
							border-right: 3px solid white;
			
							border-top: 3px solid white;
			
							animation: run 1s infinite ease-in;
			
							transform-origin: 0% 0% 0px;
			
						}
			
						.person .part.leg.one {
			
							transform: rotate3d(0, 0, 1, 90deg);
			
						}
			
						.person .part.leg.two {
			
							transform: rotate3d(0, 0, 1, 80deg);
			
							animation-delay: .5s;
			
						}	
			
		/* 	定义头部动作： */
			
			@keyframes bob {
			
							0% {
			
								transform: rotate3d(0, 0, 1, 5deg);
			
							}
			
			
			
							25% {
			
								transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);
			
							}
			
			
			
							50% {
			
								transform: rotate3d(0, 0, 1, 5deg);
			
							}
			
			
			
							75% {
			
								transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);
			
							}
			
			
			
							100% {
			
								transform: rotate3d(0, 0, 1, 20deg) skew(-15deg, 0deg);
			
							}
			
						}
			
		/* 	定义摆手的动作： */
						@keyframes pump {
			
							0% {
			
								transform: rotate3d(0, 0, 1, 80deg);
			
							}
			
			
			
							50% {
			
								transform: rotate3d(0, 0, 1, -70deg);
			
							}
			
			
			
							100% {
			
								transform: rotate3d(0, 0, 1, 80deg);
			
							}
			
						}
			
			/* 定义跑步的动作： */
			
					@keyframes run {
			
							0% {
			
								transform: rotate3d(0, 0, 1, -5deg);
			
							}
			
			
			
							50% {
			
								transform: rotate3d(0, 0, 1, 150deg);
			
							}
			
			
			
							100% {
			
								transform: rotate3d(0, 0, 1, -5deg);
			
							}
			
						}
			
		/* 	定义身体整体移动的动作： */
			
						@keyframes sprint {
			
							0% {
			
								transform-origin: 50% 50% 0px;
			
								transform: translate(-500px, 0px);
			
							}
			
			
			
							100% {
			
								transform: translate(0px, 0px);
			
								transform-origin: 50% 50% 0px;
			
								transform: translate(500px, 0px);
			
							}
			
						}
		</style>
	</head>
	<body>
		<div class='container'>
		
					<div class='person'>
		
						<div class='head'></div>
		
						<div class='part arm one'></div>
		
						<div class='part arm two'></div>
		
						<div class='torso'></div>
		
						<div class='part leg one'></div>
		
						<div class='part leg two'></div>
		
					</div>
		
				</div>
	</body>
</html>